<template>
  <div v-loading="loading" class="technology">
    <el-page-header class="page-head" @back="$router.back()">
      <template #content>
        <span style="font-weight: 600;">{{ technology.name }}</span>
      </template>
      <template #extra>
        <el-button v-if="DeleteTecPermissions" type="danger" plain @click="openDeleteTechnologyConfirmMessageBox">
          <el-icon>
            <Delete />
          </el-icon>
        </el-button>
      </template>
    </el-page-header>
    <section class="info-container">
      <el-descriptions class="descriptions-list" size="large" border>
        <template #title>
          <div class="descriptions-title">
            <el-icon class="descriptions-title-icon">
              <View />
            </el-icon>
            <span>技术信息</span>
          </div>
        </template>
        <template #extra>
          <el-button @click="openEditTechnologyDialog" v-if="EditTecPermissions">
            <el-icon>
              <Edit />
            </el-icon>
          </el-button>
        </template>
        <el-descriptions-item label="技术编号">{{ technology.id }}</el-descriptions-item>
        <el-descriptions-item label="技术名称">{{ technology.name }}</el-descriptions-item>
      </el-descriptions>
    </section>
    <section class="info-container">
      <el-descriptions class="descriptions-list" size="large" border>
        <template #title>
          <div class="descriptions-title">
            <el-icon class="descriptions-title-icon">
              <Cpu />
            </el-icon>
            <span>技术说明</span>
          </div>
        </template>
        <template #extra>
          <el-button @click="openEditTechnologyDetailDialog" v-if="EditTecPermissions">
            <el-icon>
              <Edit />
            </el-icon>
          </el-button>
        </template>
      </el-descriptions>
      <!-- <div class="technology-detail">
        {{ technology.detail }}
      </div> -->
      <div v-html="technologyDetail" class="technology-detail"></div>
    </section>
    <section class="info-container">
      <el-descriptions class="descriptions-list" size="large" border>
        <template #title>
          <div class="descriptions-title">
            <el-icon class="descriptions-title-icon">
              <User />
            </el-icon>
            <span>掌握此技术的人员</span>
          </div>
        </template>
      </el-descriptions>
      <div class="technology-users">
        <Capsule v-for="user in technology.users">
          {{ user.name }}
        </Capsule>
        <div class="nothing-note" v-if="technology.users.length <= 0">
          暂时没有人员掌握此技术
        </div>
      </div>
    </section>
    <section class="info-container">
      <el-descriptions class="descriptions-list" size="large" border>
        <template #title>
          <div class="descriptions-title">
            <el-icon class="descriptions-title-icon">
              <FolderChecked />
            </el-icon>
            <span>使用此技术的项目</span>
          </div>
        </template>
      </el-descriptions>
      <div class="technology-projects">
        <router-link :to="`/projects/${project.id}`" v-for="project in technology.projects">
          <Capsule>
            {{ project.name }}
          </Capsule>
        </router-link>

        <!-- <Capsule v-for="project in technology.projects">
          {{ project.name }}
        </Capsule> -->
      </div>
      <div class="nothing-note" v-if="technology.projects.length <= 0">
        暂时没有项目使用此技术
      </div>
    </section>
  </div>
  <EditTechnologyDialog ref="edit_technology_dialog" @update="updateTechnology"></EditTechnologyDialog>
  <EditTechnologyDetailDialog ref="edit_technology_detail_dialog" @update="updateTechnology"></EditTechnologyDetailDialog>
  <!-- <Loading :isLoading="loading" /> -->
</template>

<script>
import { post } from '../../../utils/common/api'
import MarkdownIt from 'markdown-it'
export default {
  data() {
    return {
      id: this.$route.params.id,
      // technology: {
      //   id: 1,
      //   name: 'DocMan',
      //   detail: 'DocMan 是一款基于 Node.js 的文档站点构造系统，允许您将由 Markdown 编写的文本文档构建为可供用户在浏览器中阅读的 HTML 页面！',
      //   users: [
      //     {
      //       id: 1,
      //       name: "Genius Monkeyhbd"
      //     },
      //     {
      //       id: 2,
      //       name: "Monkeyhbd"
      //     },
      //     {
      //       id: 3,
      //       name: "monkeyhbd"
      //     },
      //     {
      //       id: 4,
      //       name: "MOKEY"
      //     }
      //   ],
      //   projects: [
      //     {
      //       id: 1,
      //       name: '项目资产管理系统'
      //     },
      //     {
      //       id: 2,
      //       name: '猴猴记账'
      //     },
      //     {
      //       id: 3,
      //       name: "Mostor"
      //     }
      //   ]
      // }

      technology: {
        id: 1,
        name: '',
        detail: '',
        users: [
        ],
        projects: [
        ]
      },

      loading: false,
    }
  },


  computed: {
    technologyDetail() {
      const md = new MarkdownIt()
      const result = md.render(this.technology.detail)
      return result
    },
    EditTecPermissions() {
      return this.usePermission.systemPermission.includes(1) || this.usePermission.systemPermission.includes(10)
    },
    DeleteTecPermissions() {
      return this.usePermission.systemPermission.includes(1) || this.usePermission.systemPermission.includes(11)
    },
  },

  methods: {
    async updateTechnology() {
      this.loading = true
      const res = await post('/technology/profile', {
        id: this.id
      })
      this.technology = res
      document.title = res.name
      this.loading = false
    },

    openEditTechnologyDialog() {
      this.$refs.edit_technology_dialog.setTechnology(this.id, this.technology)
      this.$refs.edit_technology_dialog.openDialog()
    },

    openEditTechnologyDetailDialog() {
      this.$refs.edit_technology_detail_dialog.setTechnology(this.id, this.technology)
      this.$refs.edit_technology_detail_dialog.openDialog()
    },

    openDeleteTechnologyConfirmMessageBox() {
      var that = this
      ElMessageBox.confirm(
        `将 No.${that.technology.id} ${that.technology.name} 从技术列表中移除？`,
        '警告',
        {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning',
        }
      ).then(function () {
        that.deleteThisTechnology()
      })
    },

    deleteThisTechnology() {
      var that = this
      post('/technology/delete', {
        id: that.technology.id
      }).then(function (res) {
        ElNotification({
          title: '删除成功',
          message: `成功将 No.${that.technology.id} ${that.technology.name} 从技术列表中移除`,
          type: 'success',
          position: 'bottom-right',
        })
        that.$router.back()
      })
    }
  },

  mounted() {
    this.updateTechnology()
  }
}
</script>

<style scoped>
.page-head {
  margin-bottom: 40px;
}

.info-container {
  padding: 20px 0;
}

.descriptions-list {
  width: 100%;
}

.descriptions-title {
  display: flex;
  align-items: center;
}

.descriptions-title-icon {
  margin-right: 8px;
}

.technology-detail {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 24px;
  text-align: left;
  font-size: 15px;
}

.nothing-note {
  font-size: 15px;
  color: #777777;
}</style>